<template>
  <div class="user-container">
    <!-- 用户列表 -->
    <div class="user-card">
      <van-cell>
        <template #icon>
          <img :src="$store.state.newPhoto" alt="" class="userPhoto" />
        </template>
        <template #title>
          <span class="userName">{{ userObj.name }}</span>
        </template>
        <template #label>
          <van-tag type="primary" class="application">申请认证</van-tag>
        </template>
      </van-cell>
      <div class="user-data">
        <div>
          <span>{{ userObj.art_count }}</span>
          <span>动态</span>
        </div>
        <div>
          <span>{{ userObj.follow_count }}</span>
          <span>关注</span>
        </div>
        <div>
          <span>{{ userObj.fans_count }}</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>
    <!-- 操作面板 -->
    <div>
      <van-cell-group>
        <van-cell title="编辑资料" icon="edit" is-link to="/edit" />
        <van-cell title="退出登录" icon="warning-o" is-link @click="logOut" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getUserInfoAPI } from '@/api'
import { Dialog } from 'vant'
import { removeToken } from '@/utils/token.js'
import { mapMutations } from 'vuex'
export default {
  async activated() {
    const {
      data: { data }
    } = await getUserInfoAPI()
    console.log(data)
    // 重新赋值active
    this.changeActive()
    this.userObj = data
    this.changeNewPhoto(data.photo)
  },
  data() {
    return {
      userObj: {}
    }
  },
  methods: {
    // 映射使用vuex方法
    ...mapMutations(['newActive', 'changeNewPhoto']),
    // 退出登录
    logOut() {
      Dialog.confirm({
        title: '提示',
        message: '这就走了?不爱我了吗?'
      })
        .then(() => {
          // 清空token
          removeToken()
          // 点击确定
          this.$router.replace('/login')
        })
        .catch(() => {
          // 取消
        })
    },
    // 重新赋值active
    changeActive() {
      this.newActive(1)
    }
  }
}
</script>

<style lang="less" scoped>
.user-container {
  .user-card {
    background-color: rgb(0, 123, 255);
    .van-cell {
      background-color: rgb(0, 123, 255);
      padding: 20px 20px;
      &::after {
        display: none;
      }
      .userPhoto {
        width: 60px;
        border-radius: 50%;
        height: 60px;
        margin-right: 10px;
      }
      .userName {
        color: white;
        font-size: 15px;
      }
      .application {
        background-color: white;
        color: rgb(0, 123, 255);
        font-weight: bolder;
      }
    }
    .user-data {
      background-color: rgb(0, 123, 255);
      color: white;
      font-size: 15px;
      display: flex;
      justify-content: space-evenly;
      div {
        text-align: center;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
        padding-bottom: 30px;
      }
    }
  }
}
</style>
